<!-- 编辑企业信息弹窗 -->

<template>
    <div class="edit-enterprise-info-page">
        <div class="add-complain-page">
            <el-dialog 
              v-model="dialogFormVisible" 
              title="创建投诉" 
              width="1000"
              @close="closeDialog"
            >
                <el-form 
                  class="el-form" 
                  ref="ruleFormRef"
                  :model="ruleForm" 
                  :rules="rules"
                  label-width="auto"
                  :disabled="disabled"
                >
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="公司注册地址" prop="gszcdz">
                                <el-input v-model="ruleForm.gszcdz" placeholder="请输入"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="机构类型" prop="jglx">
                                <el-select
                                  v-model="ruleForm.jglx"
                                  placeholder="请选择"
                                >
                                    <el-option
                                      v-for="item in options"
                                      :key="item.value"
                                      :label="item.label"
                                      :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="企业性质" prop="qyxz">
                                <el-select
                                  v-model="ruleForm.qyxz"
                                  placeholder="请选择"
                                >
                                    <el-option
                                      v-for="item in options"
                                      :key="item.value"
                                      :label="item.label"
                                      :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="成立时间" prop="clsj">
                                <el-date-picker
                                  v-model="ruleForm.clsj"
                                  type="datetime"
                                  placeholder="请选择"
                                  :arrow-control="true"
                                  style="width: 100%"
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="法人/负责人" prop="frfzr">
                                <el-input v-model="ruleForm.frfzr" placeholder="请输入"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="法人/负责人身份证" prop="frfzrsfz">
                                <el-input v-model="ruleForm.frfzrsfz" placeholder="请输入"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="单位联系地址" prop="dwlxdz">
                                <el-input v-model="ruleForm.dwlxdz" placeholder="请输入"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="经营范围" prop="jyfw">
                                <el-select
                                  v-model="ruleForm.jyfw"
                                  placeholder="请选择"
                                >
                                    <el-option
                                      v-for="item in options"
                                      :key="item.value"
                                      :label="item.label"
                                      :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="营业执照扫描件" prop="yyzzsmj">
                                <el-upload
                                  class="upload-khxkz"
                                  v-model:file-list="ruleForm.yyzzsmj"
                                  :show-file-list="false" 
                                  :auto-upload="false"
                                  :limit="1"
                                  :on-change="uploadYYZZChange"
                                >
                                    <template #trigger>
                                        <el-button class="upload-btn">
                                            <img src="@/assets/images/u890.png" alt="">上传文件
                                        </el-button>
                                    </template>
                                </el-upload>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="公司简介" prop="gsjj">
                                <el-input v-model="ruleForm.gsjj" placeholder="请输入"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="营业执照有效期" prop="yyzzyxq">
                                <el-input v-model="ruleForm.yyzzyxq" placeholder="请输入"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="" prop="frfzrsfzsmj">
                                <div style="height: 42px;"><span style="color: #F67A7B">*</span> 法人/负责人身份证扫描件&nbsp;&nbsp;</div>
                                <el-upload
                                  class="upload-idcard"
                                  v-model:file-list="ruleForm.frfzrsfzsmj"
                                  :show-file-list="false" 
                                  :auto-upload="false"
                                  :limit="1"
                                  :on-change="uploadSFZChange"
                                >
                                    <template #trigger>
                                        <el-button class="upload-btn">
                                            <img src="@/assets/images/u890.png" alt="">上传文件
                                        </el-button>
                                    </template>
                                </el-upload>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="开户行" prop="khh">
                                <el-input v-model="ruleForm.khh" placeholder="请输入"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="银行账户">
                                <el-input v-model="ruleForm.yhzh" placeholder="请输入"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="开户行地址" prop="khhdz">
                                <el-input v-model="ruleForm.khhdz" placeholder="请输入"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="单位注册电话" prop="dwzcdh">
                                <el-input v-model="ruleForm.dwzcdh" placeholder="请输入"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="单位注册地址" prop="dwzcdz">
                                <el-input v-model="ruleForm.dwzcdz" placeholder="请输入"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="注册资本（万元）" prop="zczb">
                                <el-input v-model="ruleForm.zczb" placeholder="请输入"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="实缴资本（万元）" prop="sjzb">
                                <el-input v-model="ruleForm.sjzb" placeholder="请输入"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="" prop="khxkz">
                                <div style="height: 42px;"><span style="color: #F67A7B">*</span> 开户许可证/基本户存款信息证&nbsp;&nbsp;</div>
                                <el-upload
                                  class="upload-khxkz"
                                  v-model:file-list="ruleForm.khxkz"
                                  :show-file-list="false" 
                                  :auto-upload="false"
                                  :limit="1"
                                  :on-change="uploadCKXXChange"
                                >
                                    <template #trigger>
                                        <el-button class="upload-btn">
                                            <img src="@/assets/images/u890.png" alt="">上传文件
                                        </el-button>
                                    </template>
                                </el-upload>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button class="el-cancel-btn" @click="dialogFormVisible = false">取消</el-button>
                        <el-button id="el-save-btn" @click="handleSave()">{{ showSubmit ? '提交' : '保存' }}</el-button>
                    </div>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref, defineExpose, defineEmits, watch } from 'vue'

// 标记显示/隐藏弹窗
const dialogFormVisible = ref(false)
// 标记是否禁用编辑
const disabled = ref(false)
// 标记是否显示提交
const showSubmit = ref(false)
// 获取到表单
const ruleFormRef = ref(null)
// 表格初始化数据，也用于关闭时重置表单数据
const formInitData = {
    gszcdz: '',
    jglx: '',
    qyxz: '',
    clsj: '',
    frfzr: '',
    frfzrsfz: '',
    dwlxdz: '',
    jyfw: '',
    yyzzsmj: [],
    gsjj: '',
    yyzzyxq: '',
    frfzrsfzsmj: [],
    khh: '',
    yhzh: '',
    khhdz: '',
    dwzcdh: '',
    dwzcdz: '',
    zczb: '',
    sjzb: '',
    khxkz: []
}
const ruleForm = reactive({...formInitData})
// 校验规则
const rules = reactive({
    gszcdz: [{ required: true, message: '请输入公司注册地址', trigger: 'blur' }],
    jglx: [{ required: true, message: '请选择机构娄型', trigger: 'change' }],
    qyxz: [{ required: true, message: '请选择企业性质', trigger: 'change' }],
    clsj: [{ required: true, message: '请选择成立日期', trigger: 'blur' }],
    frfzr: [{ required: true, message: '请输入法人/负费人', trigger: 'blur' }],
    frfzrsfz: [{ required: true, message: '请输入法人/质费人身份证', trigger: 'blur' }],
    dwlxdz: [{ required: true, message: '请输入单位联系地址', trigger: 'blur' }],
    jyfw: [{ required: true, message: '请选择经营范围', trigger: 'change' }],
    yyzzsmj: [{ required: true, message: '请选择营业执照扫描件', trigger: 'change' }],
    gsjj: [{ required: true, message: '请输入公司简介', trigger: 'blur' }],
    yyzzyxq: [{ required: true, message: '请输入营业执照有效期', trigger: 'blur' }],
    frfzrsfzsmj: [{ required: true, message: '请选择法人/负责人人身份证扫描件', trigger: 'change' }],
    khh: [{ required: true, message: '请输入开户行', trigger: 'blur' }],
    khhdz: [{ required: true, message: '请输入开户行地址', trigger: 'blur' }],
    dwzcdh: [{ required: true, message: '请输入单位注册电话', trigger: 'blur' }],
    dwzcdz: [{ required: true, message: '请输入单位注册地址', trigger: 'blur' }],
    zczb: [{ required: true, message: '请输入注册资本', trigger: 'blur' }],
    sjzb: [{ required: true, message: '请输入实缴资本', trigger: 'blur' }],
    khxkz: [{ required: true, message: '请选择开户许可证/基本户存款信息证', trigger: 'change' }]
})
// 选项
const options = reactive([
    {
        value: 'Option1',
        label: '选项1',
    },
    {
        value: 'Option2',
        label: '选项2',
    },
    {
        value: 'Option3',
        label: '选项3',
    },
    {
        value: 'Option4',
        label: '选项14',
    },
    {
        value: 'Option5',
        label: '选项15',
    },
])
// 选择营业执照图片回调
const uploadYYZZChange = (file) => {
    ruleForm.yyzzsmj.push(file)
}
// 选择身份证图片回调
const uploadSFZChange = (file) => {
    ruleForm.frfzrsfzsmj.push(file)
}
// 选择存款信息证图片回调
const uploadCKXXChange = (file) => {
    ruleForm.khxkz.push(file)
}
// Dialog关闭回调
const closeDialog = () => {
    // 重置表单数据
    Object.assign(ruleForm, formInitData)
}

// 监听编辑变化
watch(ruleForm, () => {
    if (showSubmit.value) {
        showSubmit.value = false
        const btn = document.getElementById('el-save-btn')
        btn.innerText='保存'
    }
})

// 获取到emit，用户回调父组件方法
const emit = defineEmits(['editData'])
// 点击保存
const handleSave = () => {
    if (showSubmit.value) {
        disabled.value = true
        emit('editData', ruleForm)
    } else {
        console.log('保存内容', ruleForm)
        // 校验必填项
        ruleFormRef.value.validate((valid, fields) => {
            if (valid) {
                alert('提交成功')
                showSubmit.value = true
                const btn = document.getElementById('el-save-btn')
                btn.innerText='提交'
            } else {
                console.log('error submit!', fields)
            }
        })
    }
}

// 打开dialog
const showDialog = () => {
    disabled.value = false
    dialogFormVisible.value = true
}
// 将方法暴露给外部使用
defineExpose({
    showDialog
})
        
</script>

<style scoped>
.el-form {
    margin: 0 20px;
}
.el-cancel-btn {
    color: #333;
}
#el-save-btn {
    color: #fff;
    margin-right: 20px;
    background: linear-gradient(90deg, #74DB98 0%, #5AC0AA 100%);
}
.upload-btn {
    border-color: #16B6A0;
    color: #16B6A0;
    font-weight: 400;
}
.upload-btn img {
    margin-right: 10px;
}
</style>